<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img id="main_show_aside" src="../assets/showAside.png" @click="showAside">
        <img id="main_logo" src="../assets/logo_text1.png">
      </el-header>

      <el-container>
        <el-aside :width="widthOfAside">
          <div v-for="(item, index) in asideItem" :class="[index == pageOfSign ? `choose_item` : ``, `aside_item`]"
            @click="changeChoose(index)">
            <img :src='item.icon'>{{ item.content }}
          </div>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import router from '../router/router'

export default {
  name: 'mainPage',
  components: {
  },
  data() {
    return {
      widthOfAside: "0px",
      asideItem: [{
        icon: new URL("../assets/icon_map.png", import.meta.url).href,
        content: "地域分布"
      }, {
        icon: new URL("../assets/icon_count.png", import.meta.url).href,
        content: "统计"
      }, {
        icon: new URL("../assets/icon_reg.png", import.meta.url).href,
        content: "报到"
      }],
      pageOfSign: 0
    };
  },
  methods: {
    showAside() {
      let btn = document.getElementById('main_show_aside');
      if (this.widthOfAside === "0px") {
        this.widthOfAside = "170px";
        btn.style.transform = "rotate(" + 180 + "deg)";
      }
      else {
        this.widthOfAside = "0px";
        btn.style.transform = "rotate(" + 0 + "deg)";
      }
    },
    changeChoose(index) {
      this.pageOfSign = index;
      switch (index) {
        case 2:
          router.push("reporting");
          break;
        case 1:
          router.push("charts");
          break;
        default:
          router.push("map");
          break;
      }
    },
  },
  mounted() {

    //用于测试跨域拦截
    // this.$axios
    //   .get("/api/api/newpneumonia")
    //   .then((res) => {
    //     console.log(111111);
    //     console.log(res);
    //   })

  }
}
</script>

<style>
.common-layout,
.el-container {
  height: 100%;
}

.el-header img {
  margin-top: 10px;
  height: 40px;
}

#main_show_aside {
  position: fixed;
  left: 10px;
}

.el-header {
  background-color: #24292f;
  line-height: 60px;
  color: #ffffff;
  vertical-align: bottom;
}

.el-aside {
  background-color: #ffffff;
  height: 100%;
}

.aside_item {
  user-select: none;
  height: 40px;
  line-height: 50px;
  padding: 10px;
  text-align: left;
  font-size: x-large;
  vertical-align: middle;
  cursor: pointer;
}

.choose_item {
  background-color: rgb(202, 202, 202);

}

.aside_item:hover {
  background-color: rgb(219, 219, 219);
}

.aside_item img {
  height: 40px;
  float: left;
  padding-right: 10px;
}

.el-main {
  background-color: #f6f8fa;
  padding: 10px 170px !important;
}
</style>